<template>
  <div class="views-car" style="padding:30px;">

    <div class="module-filter">
      <span class="item-filter">
        车牌号：
        <el-input
          placeholder="请输入车牌号"
          v-model="search.carNo"
          clearable>
        </el-input>
      </span>
      <span class="item-filter">
        自编号：
        <el-input
          placeholder="请输入自编号"
          v-model="search.carNo"
          clearable>
        </el-input>
      </span>
      <span class="item-filter">
        车辆识别号：
        <el-input
          placeholder="请输入车辆识别号"
          v-model="search.carNo"
          clearable>
        </el-input>
      </span>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>
    <div class="module-action">
      <el-button icon="el-icon-document-add" type="primary" plain @click="handleAddEdit('add')">新增</el-button>
      <el-button icon="" type="primary" plain @click="handleAddEdit('add')">导入</el-button>
      <el-button icon="" type="primary" plain @click="handleAddEdit('add')">导出</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%;margin: 0 0 20px;">
      <el-table-column
        prop="carNo"
        label="车牌号"
        fixed
        width="100">
      </el-table-column>
      <el-table-column
        prop="innerNo"
        label="自编号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="vin"
        label="车辆识别号"
        width="170">
      </el-table-column>
      <el-table-column
        prop="carQuery"
        label="汽车品牌">
      </el-table-column>
      <el-table-column
        prop="carTypeDesc"
        label="车辆类型">
      </el-table-column>
      <el-table-column
        prop="carCharacter"
        label="使用性质"
        width="100">
      </el-table-column>
      <el-table-column
        prop="carOwner"
        label="车主名称"
        width="100">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="车主电话"
        width="140">
      </el-table-column>
      <el-table-column
        prop="companyName"
        label="所属公司名称">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleAddEdit('check',scope.$index, scope.row)">查看</el-button>
          <el-button
            size="mini"
            @click="handleAddEdit('edit',scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <span class="total">总共：{{total}}条</span>
    <el-pagination
      style="display: inline-block;vertical-align: middle"
      background
      @current-change="handleCurrentChange"
      layout=" prev, pager, next"
      :total="total">
    </el-pagination>

    <!-- 新增修改弹出框 -->
    <el-dialog :title="visibleTitle" :visible.sync="addEditVisible" width="70%">


      <div class="views-car-add">
        <div class="dialog-action">
          <el-button type="primary" @click="saveAddEdit">保存</el-button>
          <el-button  @click="addEditVisible=false">取消</el-button>
        </div>
        <el-form ref="form" :model="addEditForm" label-width="100px">
          <el-form-item class="input-must">
            <span slot="label">车牌号<span class="input-red-tips">*</span></span>
            <el-input v-model="addEditForm.carNo" :readonly="isCheckData"></el-input>
          </el-form-item>
          <el-form-item label="车辆识别号">
            <el-input v-model="addEditForm.vin" :readonly="isCheckData"></el-input>
          </el-form-item>

          <el-form-item label="自编号">
            <el-input v-model="addEditForm.innerNo" :readonly="isCheckData"></el-input>
          </el-form-item>
          <el-form-item label="发动机号">
            <el-input v-model="addEditForm.engineNo" :readonly="isCheckData"></el-input>
          </el-form-item>
          <el-form-item label="汽车品牌">
            <el-input v-model="addEditForm.payWay" :readonly="isCheckData"></el-input>
          </el-form-item>
          <el-form-item label="使用性质">
            <el-select v-model="addEditForm.carCharacter" :disabled="isCheckData" placeholder="请选择使用性质">
              <el-option
                v-for="item in carCharacterAttr"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车辆类型">
            <el-select v-model="addEditForm.carType" :disabled="isCheckData" placeholder="请选择车辆类型">
              <el-option
                v-for="item in carTypeAttr"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="车主名称">
            <el-input v-model="addEditForm.carOwner" :readonly="isCheckData"></el-input>
          </el-form-item>
          <el-form-item label="车主电话">
            <el-input v-model="addEditForm.phone" :readonly="isCheckData"></el-input>
          </el-form-item>
          <el-form-item label="所属公司">
            <el-input v-model="addEditForm.companyName" :readonly="isCheckData"></el-input>
          </el-form-item>
          <el-form-item label="变速箱">
            <el-input v-model="addEditForm.gearbox" :readonly="isCheckData"></el-input>
          </el-form-item>
          <el-form-item label="月均行驶里程">
            <el-input v-model="addEditForm.monthMileage" :readonly="isCheckData"></el-input>
          </el-form-item>



        </el-form>

        <el-tabs type="border-card">
          <el-tab-pane label="其他信息">

            <el-form ref="form" :model="addEditForm" label-width="100px">
            <el-form-item label="年票">
              <el-input v-model="addEditForm.yearLicence" :readonly="isCheckData"></el-input>
            </el-form-item>
            <el-form-item label="年票到期日期">
              <el-date-picker
                v-model="addEditForm.yearLicenceValid"
                type="date"
                :readonly="isCheckData"
                placeholder="请选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="注册日期">
              <el-date-picker
                v-model="addEditForm.e"
                type="date"
                :readonly="isCheckData"
                placeholder="请选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="发证日期">
              <el-date-picker
                v-model="addEditForm.registDate"
                type="date"
                :readonly="isCheckData"
                placeholder="请选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="环标证到期日">
              <el-date-picker
                v-model="addEditForm.greenLicenceValid"
                type="date"
                :readonly="isCheckData"
                placeholder="请选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="驾驶证到期日">
              <el-date-picker
                v-model="addEditForm.driverLicenceValid"
                type="date"
                :readonly="isCheckData"
                placeholder="请选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="运营证到期日">
              <el-date-picker
                v-model="addEditForm.operateLicenceValid"
                type="date"
                :readonly="isCheckData"
                placeholder="请选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="行驶证到期日">
              <el-date-picker
                v-model="addEditForm.drivingLicenceValid"
                type="date"
                :readonly="isCheckData"
                placeholder="请选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="行驶证地址">
              <el-input v-model="addEditForm.drivingLicenceAddress"
                        :readonly="isCheckData"></el-input>
            </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="联系人">

            <span class="action-add" @click="handleAddData('owner')" v-show="!isCheckData">+</span>
            <el-table
              :data="carOwnerData"
              border>
              <el-table-column
                width="40" class="item-action">
                <template slot-scope="scope">

                  <span class="action-delete" @click="handleDeleteData('owner',scope.$index)" v-show="!isCheckData"></span>
                </template>
              </el-table-column>
              <el-table-column
                label="联系人"
                width="200">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name"
                            :readonly="isCheckData"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="联系电话"
                width="200">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.phone"
                            :readonly="isCheckData"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="备注">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.note"
                            :readonly="isCheckData"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="年审记录">
            <span class="action-add" @click="handleAddData('owner')" v-show="!isCheckData">+</span>
            <el-table
              :data="carOwnerData"
              border>
              <el-table-column
                width="40" class="item-action">
                <template slot-scope="scope">

                  <span class="action-delete" @click="handleDeleteData('owner',scope.$index)" v-show="!isCheckData"></span>
                </template>
              </el-table-column>
              <el-table-column
                label="年审月份"
                width="200">
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="addEditForm.e"
                    :readonly="isCheckData"
                    type="month"
                    placeholder="请选择月份">
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column
                label="下次年审日期"
                width="200">
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="addEditForm.e"
                    :readonly="isCheckData"
                    type="date"
                    placeholder="请选择日期">
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column
                label="备注">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.note"
                            :readonly="isCheckData"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="保养记录">
            <span class="action-add" @click="handleAddData('owner')" v-show="!isCheckData">+</span>
            <el-table
              :data="carOwnerData"
              border>
              <el-table-column
                width="40" class="item-action">
                <template slot-scope="scope">

                  <span class="action-delete" @click="handleDeleteData('owner',scope.$index)" v-show="!isCheckData"></span>
                </template>
              </el-table-column>
              <el-table-column
                label="保养里程"
                width="200">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name"
                            :readonly="isCheckData"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="下次保养日期"
                width="200">
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="addEditForm.e"
                    type="date"
                    :readonly="isCheckData"
                    placeholder="请选择日期">
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column
                label="备注">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.note"
                            :readonly="isCheckData"></el-input>
                </template>
              </el-table-column>
            </el-table></el-tab-pane>
          <el-tab-pane label="保险记录">

            <span class="action-add" @click="handleAddData('owner')" v-show="!isCheckData">+</span>
            <el-table
              :data="carOwnerData"
              border>
              <el-table-column
                width="40" class="item-action">
                <template slot-scope="scope">
                  <span class="action-delete" @click="handleDeleteData('owner',scope.$index)" v-show="!isCheckData"></span>
                </template>
              </el-table-column>
              <el-table-column
                label="保险公司"
                width="200">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name"
                            :readonly="isCheckData"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="保险日期"
                width="200">
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="addEditForm.e"
                    type="date"
                    :readonly="isCheckData"
                    placeholder="请选择日期">
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column
                label="备注">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.note"
                            :readonly="isCheckData"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="相关图片">

            <el-upload
              action="#"
              class="module-upload"
              :http-request="uploadOss"
              :multiple="true"
              :show-file-list="false"
              list-type="picture">
              <el-select class="select-img" v-model="imgClassValue" :disabled="isCheckData" placeholder="请选择图片分类">
                <el-option
                  v-for="item in imgClassAttr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button size="small" type="primary">点击上传</el-button>

            </el-upload>
            <ul class="module-img-show">
              <li class="media" v-for="item in fileList">
                <el-image
                  class="media-object"
                  style="width: 100px; height: 100px"
                  :src="item.url"
                  :fit="cover"
                  :preview-src-list="srcList">
                </el-image>
                <span class="media-title">{{item.title}}</span>
                <i class="el-icon-delete"></i>
              </li>
            </ul>
            <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-tab-pane>
        </el-tabs>

      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getCar,getCarTypeList,saveVehicle} from '@/api/company'
  import { client } from '@/utils/alioss'
  export default{
    data(){
      return{
        search:{},
        tableData:[],
        total:0,
        page:1,
        rows:10,
        visibleTitle:'新增',
        addEditVisible:false,
        addEditForm:{
          carNo:'',
          //联系人
//          carOwnerData:[
//            {
//              name:'庄港发',
//              phone:'1379889552',
//              note:''
//            }],
//            //保养记录
//            carbaoData:[
//              {
//                date:'2019-10-10',
//                end:'2020-10-10',
//                note:''
//              },
//              {
//                date:'2019-10-10',
//                end:'2020-10-10',
//                note:''
//              },
//          ],
        },
        carCharacterAttr:[
          {
            label:'营运',
            value:'0',
          },{
            label:'非营运',
            value:'1',
          }
        ],
        imgClassAttr:[
          {
            label:'车辆图片',
            value:'车辆图片',
          },{
            label:'保险记录',
            value:'保险记录',
          },{
            label:'保养记录',
            value:'保养记录',
          }
        ],
        imgClassValue:'',
        carOwnerData:[
          {
            name:'庄港发',
            phone:'1379889552',
            note:''
          }],
        carTypeAttr:[],
        isCheckData:false,
        fileList:[
          {
            url:'https://rmcbapp.oss-cn-shenzhen.aliyuncs.com/adminTest/banner1582284287753',
            title:'车辆图片'
          },{
            url:'https://rmcbapp.oss-cn-shenzhen.aliyuncs.com/banner1582283386456',
            title:'车辆图片'
          },
        ],
        srcList:['https://rmcbapp.oss-cn-shenzhen.aliyuncs.com/adminTest/banner1582284287753','https://rmcbapp.oss-cn-shenzhen.aliyuncs.com/banner1582283386456'],
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false
      }
    },
    created(){

      getCar({page:this.page,rows:this.rows}).then(res => {
        this.tableData=res.rows;
      this.total=res.total;
    }).catch(error => {
        console.log(res,111)
    })


      this.carTypeAttr=[];
      getCarTypeList({page:1,rows:100}).then((res)=>{
        res.rows.forEach((item)=>{
        console.log(item,555)
      const itemType={
        value:item.carTypeId,
        label:item.name
      }
      this.carTypeAttr.push(itemType)
    })
    })
    },
    methods:{
      handleCurrentChange(val){
        getCar({page:val,rows:this.rows}).then(res => {
          this.tableData=res.rows;
        this.total=res.total;
      }).catch(error => {
          console.log(res,111)
      })
      },

      handleAddEdit(type){
        if(type=='add'){
          this.visibleTitle='新增车辆'
          this.isCheckData=false;
        }else if(type=='edit'){
          this.visibleTitle='编辑车辆'
          this.isCheckData=false;
        }else if(type=='check'){
          this.visibleTitle='查看车辆';
          this.isCheckData=true;
        }
        this.addEditVisible=true;
      },

      saveAddEdit(){

        if(this.addEditForm.carNo==''){
          Message({
            message: '请输入车牌号',
            type: 'error',
            duration: 1* 800
          })
          return false;
        }
//        const loading = this.$loading({
//          lock: true,
//          text: '数据提交中',
//          spinner: 'el-icon-loading',
//        });

        console.log(this.addEditForm,11111)
        saveVehicle(this.addEditForm).then((res)=>{

          console.log(res,332211)
      })
//        setTimeout(() => {
//          loading.close();
//        this.$emit('closeVisible')
//      }, 2000);
      },
      handleAddData(type){
        if(type=='owner'){

          const item={
            name:'',
            phone:'',
            note:''
          }
          this.carOwnerData.unshift(item)
        }
      },
      handleDeleteData(type,index){
        if(type=='owner'){
          this.carOwnerData.splice(index,1)
        }
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      uploadOss(file){

        var that=this;
        var fileName = 'adminTest/banner' + file.file.uid
        client().put(fileName, file.file).then(
          result => {
          console.log(result,11111)


        const item={
          name:result.name,
          url:result.url,
          title:that.imgClassValue,
        }
        that.fileList.push(item)
      })
      },
      handleDownload(file) {
        console.log(file);
      },
      handleSearch(){}
    }
  }
</script>
<style>

  .views-car .module-filter{
    margin:0 0 20px;
    padding:24px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.05);
  }
  .views-car .module-filter .item-filter{
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    padding-right: 12px;
  }
  .views-car .module-filter .item-filter .el-input{
    display: inline-block;
    vertical-align: middle;
    width: 170px;
  }
  .views-car .module-filter .item-filter .el-input__inner{
    padding: 0 10px;
  }
  .views-car .module-filter .item-filter .el-select .el-input{
    width: 110px;
  }
  .views-car .total{
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    color: #666;
  }
  .views-car .module-action{
    padding:0 0 18px;
  }
  .views-car .el-button{
    margin:0 4px 4px !important;
  }
  .views-car .el-dialog__body{
    padding:16px 30px 50px;
  }

  .views-car-add .el-form-item{
    display: inline-block;
    vertical-align: top;
    margin-right: 12px;
    margin-bottom: 18px;
  }
  .views-car-add  .el-form-item__label{
    text-align: left;
  }
  .views-car-add  .el-input__inner{
    height: 36px;
  }
  .views-car-add  .dialog-action{
    margin:0 0 16px;
    padding: 0 6px 16px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.05);
  }
  .views-car-add .el-tabs{
    box-shadow: none;
    margin:6px 0 0;
  }
  .views-car-add .el-tabs__content{
    position: relative;
  }
  .views-car-add .el-tabs .el-table .el-form-item{
    display: block;
  }
  .views-car-add .el-tabs  .el-input__inner{
    width: 190px;
  }
  .views-car-add .el-tabs .el-table td{
    padding: 0;
  }.views-car-add .el-tabs th{
     background: #f8f8f8;
     padding:8px 15px;
   }
  .views-car-add .el-tabs .cell{
    padding: 0;
  }
  .views-car-add .el-tabs td:first-child .cell{
    padding: 0;
  }
  .views-car-add .el-tabs .el-table .el-input__inner{
    border: none;
    height: 40px;
    width: 100%;
  }
  .views-car-add .action-delete{
    background: #fff;
    display: block;
    position: relative;
    z-index: 9;
    width:21px;
    height:21px;
    margin:auto ;
    border-radius: 50%;
    cursor: pointer;
    line-height: 11px;
    text-align: center;
    border: 1px solid #F56C6C;
  }
  .views-car-add .action-delete:after{
    content: '';
    background: #F56C6C;
    display: inline-block;
    width: 10px;
    height:1px;
    margin:auto;
  }
  .views-car-add .action-add{
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 10;
    background: #fff;
    display: block;
    width:22px;
    height:22px;
    margin:auto;
    border-radius: 50%;
    cursor: pointer;
    line-height: 20px;
    text-align: center;
    font-size: 18px;
    color: #409EFF;
    border: 1px solid #409EFF;
  }

  .views-car-add .el-table__fixed-right::before, .views-car-add .el-table__fixed::before{
    width: 0;
  }

  .views-car-add .el-input--suffix .el-input__inner{
    padding-right: 0 !important;
  }
  .views-car-add .el-date-editor.el-input, .views-car-add .el-date-editor.el-input__inner{
    width: auto;
  }
  .views-car-add .el-select .el-input--suffix .el-input__inner{
    padding-right: 15px!important;
  }

  .views-car-add .el-tabs .el-input--suffix .el-input__inner{
    padding-right: 30px !important;
  }
  .views-car-add .input-must .el-input__inner{
    border: 1px solid #F56C6C;
    background: #fff3f3;
  }
  .input-red-tips{
    padding-left: 3px;
    color:#F56C6C ;
    font-size: 16px;
  }
  .module-filter .el-button,.module-action .el-button,.dialog-action .el-button{
    padding:10px 16px;
  }
  .module-img-show{
    display: flex;
    margin: 0;
    padding:0;
  }
  .module-img-show .media{
    position: relative;
    width: 100px;
    height: 100px;
    list-style: none;
    margin:16px 16px 0 0;
  }
  .module-img-show .media-title{
    background: rgba(0,0,0,0.4);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding:6px 0;
    font-size: 12px;
    text-align: center;
    color: #fff;
  }
  .module-img-show .el-icon-delete{
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255,255,255,0.4);
    padding:4px;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
  }
  .views-car-add .el-tabs .select-img .el-input__inner{
    width: 216px;
  }
  .module-upload{
    padding:8px 0 2px;
  }
</style>
